<template>
	<div>
		<div class="tablebox">
			<h3 class="reportTitle">学科进度列表</h3>
			<table width="100%" cellspacing="0" cellpadding="0">
				<tr>
					<th></th>
					<th>学科</th>
					<th>满分</th>
					<th>是否赋分</th>
					<th>当前状态</th>
					<th>操作</th>
				</tr>
				<tr v-for="(item,index) in xkexamlist">
					<td>{{index+1}}</td>
					<td>{{item.name}}</td>
					<td>{{item.fullMark}}</td>
					<td>{{item.ffType==1?'是':'否'}}</td>
					<td>{{item.type2==3?'上传未开始':item.type2==0?'上传答题卡':item.type2==1?'允许阅卷':'阅卷完成'}}</td>
					<td><span>修改</span></td>
				</tr>
			</table>
		</div>
		<!-- 修改 -->
		<div class="paperFixed" v-if="fixedContentishow">
			<div class="paperfixedContent">
				<h3>修改<i class="el-icon-close" @click="fixedContentishow=false"></i></h3>
				<div style="margin-top:25px;"><span class="namewidth">学科：</span>{{nonefufen.navName}}</div>
				<div style="margin-top:25px;"><span class="namewidth">满分：</span><el-input v-model="nonefufen.fullMark"></el-input></div>
				<div style="margin-top:25px;">
					<span class="namewidth">状态：</span>
					<el-select v-model="nonefufen.type2" placeholder="请选择">
						<el-option
						  v-for="item in statelist"
						  :key="item.type"
						  :label="item.title"
						  :value="item.type">
						</el-option>
					</el-select>
				</div>
				<div style="margin-top:25px;">
					<p>赋分开关：<el-switch
					  v-model="nonefufen.ffType"
					  active-color="#3874FF"
					  inactive-color="#D5D5D5"
					  active-value='1'
					  inactive-value='0'>
					</el-switch></p>
					<p>短信开关：<el-switch
					  v-model="nonefufen.smsType"
					  active-color="#3874FF"
					  inactive-color="#D5D5D5"
					  active-value='1'
					  inactive-value='0'>
					</el-switch></p>
				</div>
				<div style="margin-top:25px;">
					总分开关：<el-switch
					  v-model="nonefufen.allscoreType"
					  active-color="#3874FF"
					  inactive-color="#D5D5D5"
					  active-value='1'
					  inactive-value='0'>
					</el-switch>
				</div>
				<div class="buttonboxexam">
					<b @click="save">保存</b>
					<b @click="fixedContentishow=false">取消</b>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {hqexamlist,exameditnav} from '../../../api/api.js'
	export default{
		data(){
			return{
				screenWidth:'',
				xkexamlist:[],
				statelist:[
					{
						title:'上传未开始',
						type:3
					},
					{
						title:'上传答题卡',
						type:0
					},
					{
						title:'允许阅卷',
						type:1
					},
					{
						title:'阅卷完成',
						type:2
					}
				],
				fixedContentishow:false,
				nonefufen:{
					fullMark:'',//满分
					type2:'',//状态
					ffType:0,//赋分开关
					smsType:0,//短信开关
					allscoreType:0,//总分开关
					selectScoreType:0,
					navId:'',
					type:0,
					type3:0,
					type4:0,
					maintenancegte:'',
					navName:''
				},
				fffentype:{A: 15,AT1: 86,AT2: 100,B: 50,BT1: 71,BT2: 85,C: 85,CT1: 56,CT2: 70,D: 98,DT1: 41,DT2: 55,E: 100,ET1: 30,ET2: 40}
			}
		},
		mounted() {
			this.screenWidth = document.body.clientWidth
			this.answerprogressjkclick(this.$route.query.navid)
		},
		methods:{
			answerprogressjkclick(id){
				let params = {
					pId:id
				}
				hqexamlist(params).then(res=>{
					if(res.code==0){
						this.xkexamlist = res.results
					}else{
						this.$message({
							type: 'error',
							message: res.msg
						}); 
					}
				})
			},
			//修改
			examfixed(con){
				// this.fixedContentishow = true
				this.nonefufen.navName = con.name
				this.nonefufen.fullMark=con.fullMark
				this.nonefufen.type2=con.type2
				this.nonefufen.ffType=con.ffType
				this.nonefufen.smsType=con.smsType
				this.nonefufen.allscoreType=con.selectScoreType
				this.nonefufen.navId = con.id
			},
			//保存
			save(){
				this.fixedContentishow = false
				if(this.nonefufen.ffType==1){
					const obj3 = Object.assign({}, this.nonefufen, this.fffentype)
					exameditnav(obj3).then(res=>{
						if(res.code==0){
							this.$message({
							  message: res.msg,
							  type: 'success'
							});
							this.answerprogressjkclick(this.$route.query.navid)
						}else{
							this.$message.error(res.msg);
						}
					})
				}else{
					// console.info(this.nonefufen)
					exameditnav(this.nonefufen).then(res=>{
						if(res.code==0){
							this.$message({
							  message: res.msg,
							  type: 'success'
							});
							this.answerprogressjkclick(this.$route.query.navid)
						}else{
							this.$message.error(res.msg);
						}
					})
				}
			}
		}
	}
</script>

<style scoped>
	.tablebox{
		box-sizing: border-box;
		background:#fff;
		margin:15px auto;
		padding:20px;
		min-height:75vh;
	}
	.tablebox table{
		border-top:solid 1px #C5D5F4;
		border-left:solid 1px #C5D5F4;
	}
	.tablebox table tr td,.tablebox table tr th{
		border-bottom:solid 1px #C5D5F4;
		border-right:solid 1px #C5D5F4;
		text-align: center;
		line-height:48px;
	}
	.tablebox table tr th{
		background:#EAF1FF 100%;
		font-size:16px;
		color:#333;
		font-weight:normal;
	}
	.reportTitle{
		font-size:16px;
		font-weight: normal;
		padding-bottom:20px;
	}
	.tablebox table tr td span{
		cursor: pointer;
		color:#3874FF
	}
	.paperFixed{
		width:100%;
		height:100%;
		position:fixed;
		background:rgba(0,0,0,0.5);
		left:0;
		top:0;
		z-index:1;
	}
	.paperfixedContent{
		box-sizing: border-box;
		width: 614px;
		height: 500px;
		background: #FFFFFF;
		border-radius: 20px;
		position:absolute;
		z-index:2;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		padding:15px 30px;
	}
	.paperfixedContent h3{
		display: flex;
		justify-content: space-between;
		font-size:16px;
		font-weight:normal;
		color:#3874FF;
		border-bottom:solid 1px #F2F2F2;
		padding-bottom:10px;
	}
	.paperfixedContent h3 i{
		font-size:20px;
		color:#666;
		cursor: pointer;
	}
	.paperfixedContent div{
		display: flex;
		justify-content: left;
		align-items: center;
	}
	.paperfixedContent div >>> .el-input{
		width:150px;
	}
	.paperfixedContent div span.namewidth{
		display:block;
		width:60px;
	}
	.paperfixedContent div p{
		display: flex;
		margin-right:100px;
	}
	.paperfixedContent div.buttonboxexam{
		margin-top:60px;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		width:100%;
	}
	.paperfixedContent div.buttonboxexam b{
		display: inline-block;
		margin:0 40px;
		width: 115px;
		height: 50px;
		border-radius: 26px;
		font-size: 16px;
		line-height:50px;
		cursor: pointer;
	}
	.paperfixedContent div.buttonboxexam b:nth-child(1){
		background: #3874FF;
		border: 1px solid #3874FF;
		color:#fff;
	}
	.paperfixedContent div.buttonboxexam b:nth-child(2){
		border: 1px solid #3874FF;
		color:#3874FF
	}
</style>